<!--今日能耗量-->
<template>
    <!-- <div> -->
    <CommonTitleComponent class="top" text="今日能耗量"></CommonTitleComponent>
    <div class="toggle_list">
        <div
            v-for="(item, index) in state.toggleList"
            :key="index"
            :class="toggleValue == index ? 'isacive' : ''"
            @click="toggleValue = index"
        >
            {{ item.name }}
        </div>
    </div>
    <div class="energyConsumption">
        <!-- 用电量 -->
        <div class="">
            <p class="electricBdoy">265(kwh)</p>
            <p class="">用电量</p>
        </div>
        <!-- 用水量 -->
        <div class="">
            <p class="waterBdoy">72(t)</p>
            <p class="">用水量</p>
        </div>
        <!-- 用气量 -->
        <div class="">
            <p class="gasBdoy">132(m³)</p>
            <p class="">用气量</p>
        </div>
    </div>
    <!-- </div> -->
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const toggleValue = ref(0);
const state = reactive({
    toggleList: [
        {
            name: '日'
        },
        {
            name: '周'
        },
        {
            name: '月'
        }
    ]
});
</script>

<style scoped lang="scss">
.top {
    padding-top: 15px;
    box-sizing: border-box;
}
.toggle_list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 10px;
    > div {
        width: 40px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #ffffff;
        border-radius: 10px;
        background: rgba(27, 147, 251, 0.2);
        margin-right: 8px;
        &:last-child {
            margin-right: 0;
        }
    }
    .isacive {
        background: #1b93fb;
    }
}
.energyConsumption {
    padding: 0 8px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    > div {
        height: 110px;
        width: calc((100% - 30px) / 3);
        background: url('@img/energy.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    p {
        &:nth-of-type(1) {
            font-size: 16px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #ffffff;
        }
        &:nth-of-type(2) {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
        }
    }
    .electricBdoy {
        background: linear-gradient(0deg, #ffac1f 0%, #eaff39 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .waterBdoy {
        background: linear-gradient(0deg, #30f6ff 0%, #00beff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .gasBdoy {
        background: linear-gradient(0deg, #f4ff21 0%, #00ff5b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
</style>
